<template>
  <div>
    <nav aria-label="Page navigation  ">
      每页条数：
      <select v-model="pageSizeOpt" style="width: 100px">
        <option v-for="(item,index) in pageSizeOpts" :key="index" :value='item'>{{item}}</option>
      </select>
        <ul class="pagination pagination-sm justify-content-end">
          <li class="page-item" @click="previousPage()">
            <a class="page-link" href="#" aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <li class="page-item" v-for="(item, index) in beginTabs" :key="index" @click="changePage(item)">
            <a class="page-link" href="#">{{item}}</a>
          </li>
          <li v-if="tabs.length > 6">...</li>
          <li class="page-item" v-for="(item, index) in endTabs" :key="index" @click="changePage(item)">
            <a class="page-link" href="#">{{item}}</a>
          </li>
<!--          <li class="page-item"><a class="page-link" href="#" @click="">2</a></li>-->
<!--          <li class="page-item"><a class="page-link" href="#">3</a></li>-->
          <li class="page-item" @click="nextPage()">
            <a class="page-link" href="#" aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
    </nav>
  </div>
</template>

<script>
module.exports={
  name: "page",
  props: {
    total: { // 总条数
      type: Number,
      default:0,
    },
    pageSize: { // 每页条数
      type: Number,
      default: 2,
    },
    current: { // 当前页
      type: Number,
      default: 1,
    },
    maxTabNum: { // 显示的最多页码，超出省略号
      type: Number,
      default: 6,
    },
    pageSizeOpts: { // 每页切换配置
      type: Array,
      default: ()=>{
        return [2, 10, 20, 40];
      },
    },
  },
  data(){
    return{
      tabs: [],// 页码数组
      pageSizeOpt: 2,
      pageNum: 0,
    }
  },
  mounted(){
    // alert(222)
    this.pageSizeOpt = this.pageSize;
    this.pageNum = this.current;
    this.initTabs();
  },
  computed: {
    beginTabs(){
      const that = this;
      return that.tabs.length > 3 ? that.tabs.slice(0,3): that.tabs;
    },
    endTabs(){
      const that = this;
      return that.tabs.length > 5 ? that.tabs.slice(3): [];
    },
  },
  watch:{
    total: {
      handler(newVal, oldVal) {
        this.initTabs();
      },
    },
    pageSizeOpt:{  // 改变条数
      handler(newVal, oldVal) {
        const that = this;
        that.$emit("on-page-size-change", newVal);
        that.initTabs();
      },
    },
    // pageSize:{  // 改变条数
    //   handler(newVal, oldVal) {
    //     const that = this;
    //     that.initTabs();
    //   },
    // },
  },
  methods:{
    // 计算页码数组
    initTabs(){
      const that = this;
      if(!that.total || !that.pageSizeOpt || !that.current){
        return;
      }
      // 获取所有页码数量
      const tabNum = that.total / that.pageSizeOpt;
      let totalTabNum = parseInt(tabNum);
      if(totalTabNum < tabNum){
        totalTabNum += 1;
      }
      // 够六个和不够六个两种情况
      if(totalTabNum > that.maxTabNum){
        // 取前三个和后三个中间省略号
        that.tabs = [1, 2, 3];
        for(let i = totalTabNum, j = 3; j >= 0; i --, j ++){
          that.tabs.splice(j,0,j+1);
        }
      }else{
        that.tabs = [];
        for(let i = 1; i <= totalTabNum; i ++){
          that.tabs.push(i);
        }
      }
    },
    // 改变页码
    changePage(pageNum){
      const that = this;
      that.pageNum = pageNum;
      that.$emit("on-change", pageNum);
    },
    previousPage(){
      const that = this;
      if(that.pageNum <= 1){
        return;
      }
      that.pageNum -= 1;
      that.$emit("on-change", that.pageNum);
    },
    nextPage(){
      const that = this;
      if(that.pageNum >= that.tabs[that.tabs.length - 1]){
        return;
      }
      that.pageNum += 1;
      that.$emit("on-change", that.pageNum);
    },

  },
}
</script>

<style scoped>

</style>